<template>
  <el-form  ref="userForm" size="large" id="loginForm" :rules="rules" :model="form">
    <el-form-item label="账号" prop="userAccount">
      <el-input  v-model="form.userAccount"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="userPassword">
      <el-input   v-model="form.userPassword"></el-input>
    </el-form-item>
    <el-form-item label="用户名" prop="userName">
      <el-input  v-model="form.userName"></el-input>
    </el-form-item>
    <el-form-item label="联系方式" prop="userPhone">
      <el-input   v-model="form.userPhone"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="userEmail">
      <el-input   v-model="form.userEmail"></el-input>
    </el-form-item>
    <el-row  justify="center">
      <el-col :span="3"><el-button type="primary" @click="submitForm($refs.userForm)">保存</el-button></el-col>
      <el-col :span="3"><el-button @click="closeForm">关闭</el-button></el-col>
    </el-row>
  </el-form>
</template>
<script setup>
import {onMounted, onServerPrefetch, onUpdated, reactive, ref} from "vue";
import {checkCount, login, verificationCode, verification, addUser, editUser} from '../../../request/system/api.js'
import {ElMessage, ElNotification} from "element-plus";
import axios from "axios";
const insert=ref(true)
const form =reactive({
  userAccount:'',
  userPassword:'',
  userName:'',
  userPhone:'',
  userEmail:'',
  userNo:''
})
const rest=(isInsert)=>{
  insert.value=isInsert
  userForm.value.resetFields()
}
const userForm=ref()
const fillForm=(row)=>{
  console.log(row)
  rest(false)
  form.userPhone= row.userPhone
  form.userName= row.userName
  form.userEmail= row.userEmail
  form.userNo= row.userNo
  form.userPassword= row.userPassword
  form.userAccount= row.userAccount
}

const check= (rule, value, callback)=>{
  checkCount(form.account).then((response)=>{
    if(!insert.value){
      if(response.exception=="用户不存在"){
        callback(new Error("用户不存在"))
      }else {
        callback()
      }
    }else {
      if(response.exception!="用户不存在"){
        callback(new Error("用户已存在"))
      }else {
        callback()
      }
    }
  })
}
const checkPhone= (rule, value, callback)=>{
  checkCount(form.account).then((response)=>{

    if(form.userPhone.length!=0){
      let pr=phoneRegular()
      if(pr.test(form.userPhone)){
        callback()
      }else {
        callback(new Error("请输入正确的手机号"))
      }
    }else {
      callback()
    }
  })
}
const checkEmail= (rule, value, callback)=>{
  checkCount(form.account).then((response)=>{
    if(form.userEmail.length!=0){
      let er=emailRegular()
      if(er.test(form.userEmail)){
        callback()
      }else {
        callback(new Error("请输入正确的邮箱"))
      }
    }else {
      callback()
    }

  })
}
const emits = defineEmits(['closeUserForm','submitUserForm']);
const closeForm=()=>{
    emits("closeUserForm")
}
const rules=reactive({
  userPassword:[
    {
      required: true,message:"密码不能为空",trigger:'blur'
    },
    {
      max:20,message: "密码最长为20",trigger:'blur'
    }
  ],
  userAccount:[
    {
      required:true,message:"帐号不能为空",trigger:'blur'
    },
    {
      validator: check,trigger:'blur'
    }
  ],
  userPhone:[

    {
      validator: checkPhone,trigger:'blur'
    }
  ],
  userEmail:[
    {
      validator: checkEmail,trigger:'blur'
    }
  ]
})

const submitForm = async (formEl) => {
  if (!formEl) return

  await formEl.validate((valid, fields) => {
    if (valid) {
      if(insert.value){
        addUser(form).then((response)=>{
          if(response.state=="200"){
            ElMessage.success("新增成功")
            emits("submitUserForm")
          }
        })
      }else {
        editUser(form).then((response)=>{
          if(response.state=="200"){
            ElMessage.success("修改成功")
            emits("submitUserForm")
          }
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
defineExpose({ rest,fillForm })
onMounted(()=>{


})
</script>
<style scoped>

</style>